<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">











<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>ioko-tapestry-commons - </title>
    <style type="text/css" media="all">
      @import url("./css/maven-base.css");
      @import url("./css/maven-theme.css");
      @import url("./css/site.css");
    </style>
    <link rel="stylesheet" href="./css/print.css" type="text/css" media="print" />
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
                                                    
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
                                                        
<script type="text/javascript">try {
                var pageTracker = _gat._getTracker("UA-75598-9");
                pageTracker._trackPageview();
                } catch(err) {}</script>
                    </head>
  <body class="composite">
    <div id="banner">
                  <a href="http://tapestry.formos.com/projects/ioko-tapestry-commons/" id="bannerLeft">
    
                                            <img src="images/tapestry-commons.png" alt="" />
    
            </a>
                        <a href="http://www.ioko.com/" id="bannerRight">
    
                                            <img src="images/ioko.png" alt="" />
    
            </a>
            <div class="clear">
        <hr/>
      </div>
    </div>
    <div id="breadcrumbs">
          
  

  
    
            
  
    
            <div class="xleft">
        Last Published: 2009-09-24
                      </div>
            <div class="xright">      
  

  
    
            
  
    
             Version: 1.6.0-SNAPSHOT
      </div>
      <div class="clear">
        <hr/>
      </div>
    </div>
    <div id="leftColumn">
      <div id="navcolumn">
           
  

  
    
            
  
    
                   <h5>Sites</h5>
            <ul>
              
    <li class="none">
                    <a href="http://tapestry.formos.com/projects/ioko-tapestry-commons/" class="externalLink">Release Site</a>
          </li>
              
    <li class="none">
                    <a href="http://tapestry.formos.com/nightly/ioko-tapestry-commons/" class="externalLink">Nightly Site</a>
          </li>
          </ul>
              <h5>Project Documentation</h5>
            <ul>
              
                
              
      
            
      
            
      
            
      
            
      
            
      
            
      
            
      
            
      
            
      
            
      
            
      
              
        <li class="collapsed">
                    <a href="project-info.html">Project Information</a>
                </li>
          </ul>
                        <h5>Developers</h5>
            <ul>
              
    <li class="none">
                    <a href="development.html">Development Guide</a>
          </li>
          </ul>
                                           <a href="http://maven.apache.org/" title="Built by Maven" class="poweredBy">
            <img alt="Built by Maven" src="./images/logos/maven-feather.png"></img>
          </a>
                       
  

  
    
            
  
    
        </div>
    </div>
    <div id="bodyColumn">
      <div id="contentBox">
        <div class="section"><h2>Stacks</h2>
<p>One of the common requests is how to use libraries such as JQuery in tapestry applications. There are two options for doing this</p>
<ul><li>Include it on each page/component using an @IncludeJavascript annonation (or using renderSupport.addScriptLink() )</li>
<li>Include them globally in a 'stack'<p>IncludeJavascript is quick and easy but can have disadvantages when you have common libraries loaded on a lot of pages. If you have multiple projects using the same library then you can get it included twice.</p>
<p>This library seeks to solve this by allowing you to contribute your required libraries to it and then it will add them into the 'stack' whenever javascript is used.</p>
<p>This code will de-duplicate libraries based on the filename (path/directories are ignored).</p>
</li>
</ul>
</div>
<div class="section"><h2>Usage</h2>
<p>Simply add a dependency on this to your project.</p>
<p>In your module you should contribute any libraries you require</p>
<div class="source"><pre>
public static void contributeJavascriptStack(
                    @Path(&quot;classpath:/uk/co/ioko/tapestry/javascript/jquery-1.3.2.js&quot;) Asset jquery,
                    Configuration&lt;Asset&gt; stack){
                stack.add(jquery);

        }
</pre>
</div>
<p>If a second library were to add the same version of Jquery this library would detect that conflict and only supply one. If it were to supply a different version then it would include both (as it can't tell they are the same).</p>
</div>
<div class="section"><h2>Production Mode</h2>
<p>A handy tip is to use the production mode system to include a debug version of third party libraries e.g.</p>
<div class="source"><pre>
public static void contributeJavascriptStack(
                    @Path(&quot;classpath:/uk/co/ioko/tapestry/javascript/jquery-1.3.2.js&quot;) Asset jqueryDev,
                    @Path(&quot;classpath:/uk/co/ioko/tapestry/javascript/jquery-1.3.2.min.js&quot;) Asset jquery,
                    @Symbol(&quot;tapestry.production-mode&quot;) Boolean productionMode,
                    Configuration&lt;Asset&gt; stack){
                if (productionMode){
                    stack.add(jquery);
                } else {
                    stack.add(jqueryDev);
                }
        }</pre>
</div>
</div>
<div class="section"><h2>JQuery Specific Note</h2>
<p>If you do include JQuery you will almost certainly want to turn on it's no conflict mode - <a class="externalLink" href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries">http://docs.jquery.com/Using_jQuery_with_Other_Libraries</a>. The easiest way to do this to include another JS after it that calls 'jQuery.noConflict();'</p>
</div>

      </div>
    </div>
    <div class="clear">
      <hr/>
    </div>
    <div id="footer">
      <div class="xright">&#169;  
          2009
    
          ioko
          
  

  
    
            
  
    
  </div>
      <div class="clear">
        <hr/>
      </div>
    </div>
  </body>
</html>
